import React from 'react';
import { motion } from 'framer-motion';
import { 
  Box, 
  Factory, 
  Eye, 
  Layers,
  ArrowRight,
  Circle,
  Square,
  Triangle,
  Zap,
  Users,
  Target,
  Code
} from 'lucide-react';
import { VisualizationProps } from '@/types';

const Visualization: React.FC<VisualizationProps> = ({ pattern }) => {
  const renderSingletonVisualization = () => (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">单例模式结构</h3>
      
      <div className="flex flex-col items-center space-y-4">
        {/* Singleton Instance */}
        <motion.div
          className="flex items-center space-x-3 p-4 bg-primary-100 rounded-lg border-2 border-primary-300"
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 0.5 }}
        >
          <Box className="w-6 h-6 text-primary-600" />
          <div>
            <div className="font-semibold text-primary-900">唯一实例</div>
            <div className="text-sm text-primary-700">Singleton.getInstance()</div>
          </div>
        </motion.div>
        
        {/* Access Points */}
        <div className="flex space-x-2">
          {[1, 2, 3].map((i) => (
            <motion.div
              key={i}
              className="flex flex-col items-center space-y-2"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.2 }}
            >
              <div className="w-16 h-12 bg-gray-100 rounded-lg flex items-center justify-center text-xs font-mono text-gray-600">
                getInstance()
              </div>
              <ArrowRight className="w-4 h-4 text-gray-400" />
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );

  const renderFactoryVisualization = () => (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">工厂模式结构</h3>
      
      <div className="space-y-4">
        {/* Factory */}
        <motion.div
          className="flex items-center justify-center p-4 bg-green-100 rounded-lg border-2 border-green-300"
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 0.5 }}
        >
          <Factory className="w-6 h-6 text-green-600" />
          <div className="ml-3">
            <div className="font-semibold text-green-900">工厂类</div>
            <div className="text-sm text-green-700">AnimalFactory</div>
          </div>
        </motion.div>
        
        {/* Products */}
        <div className="grid grid-cols-3 gap-2">
          {['Dog', 'Cat', 'Bird'].map((product, index) => (
            <motion.div
              key={product}
              className="p-3 bg-blue-100 rounded-lg text-center"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.2 }}
            >
              <div className="text-sm font-semibold text-blue-900">{product}</div>
              <div className="text-xs text-blue-700">产品</div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );

  const renderObserverVisualization = () => (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">观察者模式结构</h3>
      
      <div className="space-y-4">
        {/* Subject */}
        <motion.div
          className="flex items-center justify-center p-4 bg-purple-100 rounded-lg border-2 border-purple-300"
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 0.5 }}
        >
          <Eye className="w-6 h-6 text-purple-600" />
          <div className="ml-3">
            <div className="font-semibold text-purple-900">主题</div>
            <div className="text-sm text-purple-700">NewsAgency</div>
          </div>
        </motion.div>
        
        {/* Observers */}
        <div className="grid grid-cols-2 gap-2">
          {['观察者1', '观察者2', '观察者3', '观察者4'].map((observer, index) => (
            <motion.div
              key={observer}
              className="p-3 bg-orange-100 rounded-lg text-center"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
            >
              <div className="text-sm font-semibold text-orange-900">{observer}</div>
              <div className="text-xs text-orange-700">订阅者</div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );

  const renderDefaultVisualization = () => (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">模式结构图</h3>
      
      <div className="space-y-4">
        <motion.div
          className="flex items-center justify-center p-4 bg-gray-100 rounded-lg"
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 0.5 }}
        >
          <Layers className="w-6 h-6 text-gray-600" />
          <div className="ml-3">
            <div className="font-semibold text-gray-900">模式组件</div>
            <div className="text-sm text-gray-700">核心实现</div>
          </div>
        </motion.div>
        
        <div className="grid grid-cols-3 gap-2">
          {[
            { icon: Circle, label: '接口', color: 'blue' },
            { icon: Square, label: '实现', color: 'green' },
            { icon: Triangle, label: '客户端', color: 'purple' }
          ].map((item, index) => (
            <motion.div
              key={item.label}
              className={`p-3 bg-${item.color}-100 rounded-lg text-center`}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.2 }}
            >
              <item.icon className={`w-4 h-4 text-${item.color}-600 mx-auto mb-1`} />
              <div className={`text-xs font-semibold text-${item.color}-900`}>
                {item.label}
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );

  const renderStrategyVisualization = () => (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">策略模式结构</h3>
      
      <div className="space-y-4">
        {/* Context */}
        <motion.div
          className="flex items-center justify-center p-4 bg-blue-100 rounded-lg border-2 border-blue-300"
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 0.5 }}
        >
          <Target className="w-6 h-6 text-blue-600" />
          <div className="ml-3">
            <div className="font-semibold text-blue-900">上下文</div>
            <div className="text-sm text-blue-700">ShoppingCart</div>
          </div>
        </motion.div>
        
        {/* Strategies */}
        <div className="grid grid-cols-3 gap-2">
          {['信用卡', 'PayPal', '银行转账'].map((strategy, index) => (
            <motion.div
              key={strategy}
              className="p-3 bg-green-100 rounded-lg text-center"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.2 }}
            >
              <div className="text-sm font-semibold text-green-900">{strategy}</div>
              <div className="text-xs text-green-700">支付策略</div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );

  const renderCommandVisualization = () => (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">命令模式结构</h3>
      
      <div className="space-y-4">
        {/* Invoker */}
        <motion.div
          className="flex items-center justify-center p-4 bg-purple-100 rounded-lg border-2 border-purple-300"
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 0.5 }}
        >
          <Zap className="w-6 h-6 text-purple-600" />
          <div className="ml-3">
            <div className="font-semibold text-purple-900">调用者</div>
            <div className="text-sm text-purple-700">RemoteControl</div>
          </div>
        </motion.div>
        
        {/* Commands */}
        <div className="grid grid-cols-2 gap-2">
          {['开灯命令', '关灯命令', '撤销命令', '宏命令'].map((command, index) => (
            <motion.div
              key={command}
              className="p-3 bg-yellow-100 rounded-lg text-center"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
            >
              <div className="text-sm font-semibold text-yellow-900">{command}</div>
              <div className="text-xs text-yellow-700">命令对象</div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );

  const renderVisitorVisualization = () => (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">访问者模式结构</h3>
      
      <div className="space-y-4">
        {/* Elements */}
        <div className="grid grid-cols-3 gap-2">
          {['文件', '目录', '链接'].map((element, index) => (
            <motion.div
              key={element}
              className="p-3 bg-blue-100 rounded-lg text-center"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
            >
              <div className="text-sm font-semibold text-blue-900">{element}</div>
              <div className="text-xs text-blue-700">元素</div>
            </motion.div>
          ))}
        </div>
        
        {/* Visitors */}
        <motion.div
          className="flex items-center justify-center p-4 bg-green-100 rounded-lg border-2 border-green-300"
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 0.5, delay: 0.3 }}
        >
          <Users className="w-6 h-6 text-green-600" />
          <div className="ml-3">
            <div className="font-semibold text-green-900">访问者</div>
            <div className="text-sm text-green-700">SizeCalculator, SearchVisitor</div>
          </div>
        </motion.div>
      </div>
    </div>
  );

  const renderInterpreterVisualization = () => (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">解释器模式结构</h3>
      
      <div className="space-y-4">
        {/* Context */}
        <motion.div
          className="flex items-center justify-center p-4 bg-indigo-100 rounded-lg border-2 border-indigo-300"
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 0.5 }}
        >
          <Code className="w-6 h-6 text-indigo-600" />
          <div className="ml-3">
            <div className="font-semibold text-indigo-900">上下文</div>
            <div className="text-sm text-indigo-700">变量存储</div>
          </div>
        </motion.div>
        
        {/* Expressions */}
        <div className="grid grid-cols-2 gap-2">
          {['数字表达式', '变量表达式', '加法表达式', '乘法表达式'].map((expr, index) => (
            <motion.div
              key={expr}
              className="p-3 bg-pink-100 rounded-lg text-center"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
            >
              <div className="text-sm font-semibold text-pink-900">{expr}</div>
              <div className="text-xs text-pink-700">表达式</div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );

  const getVisualization = () => {
    switch (pattern.name) {
      case '单例模式':
        return renderSingletonVisualization();
      case '工厂方法模式':
        return renderFactoryVisualization();
      case '观察者模式':
        return renderObserverVisualization();
      case '策略模式':
        return renderStrategyVisualization();
      case '命令模式':
        return renderCommandVisualization();
      case '访问者模式':
        return renderVisitorVisualization();
      case '解释器模式':
        return renderInterpreterVisualization();
      default:
        return renderDefaultVisualization();
    }
  };

  return (
    <motion.div
      className="bg-white rounded-lg border border-gray-200 p-4"
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
    >
      {getVisualization()}
    </motion.div>
  );
};

export default Visualization;
